<template>
	<view class="content">
		<view class="inv-h-w">
		        <view :class="['inv-h',Inv==0?'inv-h-se':'']" @click="Inv=0"> 全部订单</view>
		        <view :class="['inv-h',Inv==1?'inv-h-se':'']" @click="Inv=1">待付款</view>
				 <view :class="['inv-h',Inv==2?'inv-h-se':'']" @click="Inv=2">待收货</view>
				 
		</view>
		<view v-show="Inv == 0" >
					<view class="box">
						<image :src="$host+'apc.jpg'" mode="widthFix"></image>
						<view class="title">
							<view class="one">30天内没有订单</view>
								<view class="two">可以去看看哪些可以买的</view>
						<view class="ii"> <view class="three" @click="gohome">返回首页</view> <view class="four">更多历史订单</view>   </view>		
							
						</view>
					</view>
					   
		</view>
		<view v-show="Inv == 1">
					<view class="box">
						<image :src="$host+'apc.jpg'" mode="widthFix"></image>
						<view class="title">
							<view class="one">30天内没有订单</view>
								<view class="two">可以去看看哪些可以买的</view>
						<view class="ii"> <view class="three" @click="gohome">返回首页</view> <view class="four">更多历史订单</view>   </view>		
							
						</view>
					</view>
					   
		</view>
		<view v-show="Inv == 2">
				<view class="box">
					<image :src="$host+'apc.jpg'" mode="widthFix"></image>
					<view class="title">
						<view class="one">30天内没有订单</view>
							<view class="two">可以去看看哪些可以买的</view>
					<view class="ii"> <view class="three" @click="gohome">返回首页</view> <view class="four">更多历史订单</view>   </view>		
						
					</view>
				</view>	
					   
		</view>
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				Inv:0,
				$host:this.$host
			}
		},
		onLoad(option) {
			this.Inv=option.id
		},
		methods:{
			gohome(){
				uni.redirectTo({
					url:"/pages/index/index"
				})
			},
			changeTab(Inv){
			        that.navIdx = Inv;
			         
			}
			
		}
	}
</script>

<style>
	.ii{
		display: flex;
		margin-top: 30rpx;
	}
	.title{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.box{
		 display: flex;
		 flex-direction: column;
		 align-items: center;
		 margin-top: 110px;
	     
	}
	.box image{
		width: 120px;
	}
	.one{
		font-size: 35rpx;
		margin-top: 18px;
	}
	.two{
		font-size: 28rpx;
		color: #C9C9C9;
		margin-top: 10rpx;
	}
	.three{
		border-radius: 20px;
		width: 158rpx;
		height: 61rpx;
		border: 1px solid #C9C9C9;
		color: #C9C9C9;
		margin-right: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		
	}
	.four{
		
		border-radius: 30px;
		width: 254rpx;
		height: 61rpx;
		border: 1px solid #fe9a69;
		color: #fe9a69;
		margin-left: 16rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	
	.inv-h-w{background-color: #FFFFFF;height: 100upx;display: flex;}
	.inv-h{font-size: 30upx;flex: 1;text-align: center;color: #C9C9C9;height: 100upx;line-height: 100upx;}
	.inv-h-se{color: black;border-bottom: 4upx solid #fe9a69;}
	 page{background-color: white;}
</style>